<template>
  <div class="right">
    <div class="r-top" :style="style">
      <div class="r-top-o">AMR状态监控</div>
      <div class="r-top-t">
        <div
          class="r-cars"
          :style="style2"
          v-for="(i, index) in data"
          :key="index"
        >
          <div class="box">
            <img
              class="r-car"
              :src="require('../../../assets/car.png')"
              alt=""
            />
            <div class="text" :style="{ color: i.color }">{{ i.name }}</div>
          </div>
        </div>
        <!-- <div class="r-cars" :style="style2">
          <div class="box">
            <img
              class="r-car"
              :src="require('../../../assets/car.png')"
              alt=""
            />
            <div class="text">空闲</div>
          </div>
        </div>
        <div class="r-cars" :style="style2">
          <div class="box">
            <img
              class="r-car"
              :src="require('../../../assets/car.png')"
              alt=""
            />
            <div class="text">空闲</div>
          </div>
        </div>
        <div class="r-cars" :style="style2">
          <div class="box">
            <img
              class="r-car"
              :src="require('../../../assets/car.png')"
              alt=""
            />
            <div class="text">空闲</div>
          </div>
        </div>
        <div class="r-cars" :style="style2">
          <div class="box">
            <img
              class="r-car"
              :src="require('../../../assets/car.png')"
              alt=""
            />
            <div class="text">空闲</div>
          </div>
        </div> -->
      </div>

      <div class="r-top-table">
        <table class="table" width="100%" align="center">
          <thead>
            <tr class="t-head">
              <th>序号</th>
              <th>AMR</th>
              <th>样品编号</th>
              <th>起点</th>
              <th>终点</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(i, index) in taskData" :key="index">
              <td>{{ index + 1 }}</td>

              <td>{{ i.robotId }}</td>
              <td style="color: #06d5f5">{{ i.samNumber }}</td>
              <td>{{ i.origin }}</td>
              <td>{{ i.destination }}</td>
              <td style="color: #06d5f5">{{ trans(i.status) }}</td>
            </tr>
          </tbody>
        </table>
        \
      </div>
    </div>
    <div class="r-bottom">
      <RightBottomVue></RightBottomVue>
    </div>
  </div>
</template>


<script>
import RightBottomVue from "./rightBottom.vue";
import { getRobots, getAmrWayTask } from "@/common/api";

export default {
  name: "RightModule",
  props: {},
  components: {
    RightBottomVue,
  },
  data() {
    return {
      bgStyle: require("@/assets/bgImg.png"),
      bgStyle2: require("@/assets/round.png"),
      data: [{}, {}, {}, {}, {}],
      taskData: [],
    };
  },
  computed: {
    style() {
      return {
        backgroundImage: `url(${this.bgStyle})`,
        // backgroundSize: "cover", // 背景图片大小自适应
        // backgroundPosition: "center", // 背景图片居中显示
        backgroundRepeat: "no-repeat", // 确保背景图片不重复
        backgroundSize: "100% 100%",
      };
    },
    style2() {
      return {
        backgroundImage: `url(${this.bgStyle2})`,
        backgroundSize: "contain", // 背景图片大小自适应
        backgroundPosition: "center", // 背景图片居中显示
        backgroundRepeat: "no-repeat",
      };
    },
  },
  methods: {
    getRobots() {
      getRobots().then((res) => {
        if (res.success) {
          this.data = res.data;
          this.data.forEach((i) => {
            if (i.run_state == 0) {
              i["color"] = "orange";
              i["name"] = "维护中";
            }
            if (i.run_state == 1) {
              i["color"] = "#4AC7D3";
              i["name"] = "就绪中";
            }
            if (i.run_state == 2) {
              i["color"] = "#EED581";
              i["name"] = "执行中";
            }
            if (i.run_state == 3) {
              i["color"] = "#00E50D";
              i["name"] = "充电中";
            }
            if (i.run_state == 4) {
              i["color"] = "red";
              i["name"] = "故障中";
            }
            if (i.run_state == 5) {
              i["color"] = "red";
              i["name"] = "离线中";
            }
          });
        }
      });
    },
    getAmrWayTask() {
      getAmrWayTask().then((res) => {
        if (res.success) {
          // console.log(res.data, "88888888888");
          this.taskData = res.data;
        }
      });
    },
    trans(e) {
      if (e == 0) {
        return "排队中";
      }
      if (e == 1) {
        return "执行中";
      }
      if (e == 2) {
        return "人工处理";
      }
      if (e == 3) {
        return "人工处理";
      }
      if (e == 4) {
        return "取消中";
      }
      if (e == 5) {
        return "正常完成";
      }
      if (e == 6) {
        return "取消完成";
      }
      if (e == 7) {
        return "出错终止";
      }
    },
  },
  created() {
    this.getRobots();
    this.getAmrWayTask();
    setInterval(() => {
      this.getRobots();
      this.getAmrWayTask();
    }, 1000 * 60);
  },
};
</script>


<style lang="scss" scoped>
.right {
  width: calc(25vw - 30px);
  padding: 0px 10px 20px 20px;
  //height: calc(50vh - 8vh - 20px);
  height: calc(50vh - 8vh - 9px);
  display: flex;
  flex-direction: column;

  .r-top {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;

    .r-top-o {
      text-align: center;
      height: 10%;
      color: white;
      font-size: 10px;
    }

    .r-top-t {
      margin-top: 10px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      height: 20%;

      .r-cars {
        width: 18%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .box {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 24px;

          .text {
            font-size: 10px;
            color: #5df8f7;
          }
        }

        .r-car {
          width: 50%;
          height: 50%;
        }
      }
    }

    .r-top-table {
      flex: 1;
      padding: 0px 8px;
      overflow-y: auto;
      margin-top: 30px;
      margin-bottom: 8px;

      .table {
        font-size: 8px;
        color: white;
        border-collapse: collapse;

        .t-head {
          color: #5bccf2;
        }

        tr td {
          text-align: center;
          height: 15px;
        }
      }
    }
  }

  .r-bottom {
    width: 100%;
    height: 48%;
    margin-top: 2vh;
    // background-color: orange;
  }

  thead th {
    position: sticky;
    /* 固定表头 */
    top: 0;
    /* 距离顶部的距离 */
    z-index: 10;
    /* 确保表头在其他内容之上 */
    background-color: #0b38aa;
    color: #00fff4;
    height: 15px;
  }

  .r-top-table::-webkit-scrollbar {
    display: none;
    /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  }

  .r-top-table {
    -ms-overflow-style: none;
    /* 针对 IE 和 Edge */
    scrollbar-width: none;
    /* 针对 Firefox */
  }
}
/* 偶数行背景色 */
.table tbody tr:nth-child(even) {
  background-color: #092988;
}

/* 奇数行背景色 */
.table tbody tr:nth-child(odd) {
  background-color: #082176;
}
</style>
